<template>
  <div>
    <!--    第一行占屏幕高度64%，第二行占32%，预留2%给标签页。-->
    <!--    第一行6、12、6分三列，左右两列又分两行，均占高30%，中间占高62%-->
    <a-row style="margin: 0 -12px; height: 64vh">
      <a-col style="padding: 0 12px" :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-row>
          <a-card style="height: 30vh" :title="poolInfo.pool_name">
            <a-icon slot="extra" type="bank"/>
            <p>地址：{{ this.poolInfo.address }}</p>
            <p>联系电话：022-23085678</p>
            <p>设备ID：{{ this.poolInfo.dev_id }}</p>
          </a-card>
        </a-row>
        <a-row style="padding: 2vh 0">
          <a-card style="height: 30vh" :body-style="cardStyle">
            <TemperatureBar :temperature="poolInfoData.temperature" />
          </a-card>
        </a-row>
      </a-col>
      <a-col style="padding: 0 2px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card style="height: 62vh;margin: 8px !important;" title="泳池监控模型">
          <a-icon slot="extra" type="deployment-unit"/>
          <!--          3D带旋转的，最好能互动拖拽的-->
<!--          <ObjModel></ObjModel>-->
          <div class="sketchfab-embed-wrapper"> <iframe title="Mircod - IoT - Water Leak Detector" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share width="516" height="320" src="https://sketchfab.com/models/0034c6200d2848068f4a2b33743166d1/embed?autostart=1&transparent=1"> </iframe></div>
        </a-card>
      </a-col>
      <a-col style="padding: 0 12px" :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-row>
          <a-card style="height: 30vh;" :body-style="cardStyle" title="浊度值 & TDS">
            <a-icon slot="extra" type="dot-chart"/>
            <TriangleBar :id="'main'" :tds="poolInfoData.tds" :tur="poolInfoData.turbidity" />
          </a-card>
        </a-row>
        <a-row style="padding: 2vh 0">
          <a-card style="height: 30vh" :body-style="cardStyle">
            <WaterLevel :real-level="poolInfoData.waterLevel" />
          </a-card>
        </a-row>
      </a-col>
    </a-row>
    <a-row style="margin: 0 -12px; height: 32vh">
      <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card style="height: 28vh" :body-style="cardStyle">
          <TemperatureLine :history-list="tempHistory" />
        </a-card>
      </a-col>
      <a-col style="padding: 0 4px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
        <a-row>
          <div style="width: 100%; height: 4vh">
            <TextRoller class="scrollContainer" :lists="list" v-if="list.length"></TextRoller>
          </div>
        </a-row>
        <a-row>
          <a-col style="padding: 0 4px 0 0" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card style="height: 24vh" :body-style="cardStyle">
              <EnergyDashboard></EnergyDashboard>
            </a-card>
          </a-col>
          <a-col style="padding: 0 0 0 4px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card style="height: 24vh;" :body-style="cardStyle">
              <PHBar :ph="poolInfoData.ph" />
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card style="height: 28vh;" :body-style="cardStyle">
          <WaterLevelLine :level-list="waterLevelHistory" />
        </a-card>
      </a-col>
    </a-row>
    <a-card style="margin: 24px 0" :bordered="false" title="历史详细数据">
      <a-table
          row-key="id"
          style="margin-bottom: 24px"
          :columns="historyDataColumns"
          :dataSource="historyData"
          :pagination="{ pageSize: 50 }"
          :scroll="{ y: 240 }"
          v-show="historyData !== []"
      />
      <a-list v-show="historyData === []"/>
    </a-card>
    <!--    把上面顶上去，作为最后于页尾间距的垫板-->
    <a-card :bordered="false"/>
  </div>
</template>

<script>
import TriangleBar from "@/components/echarts/TriangleBar";
import WaterLevel from "@/components/echarts/WaterLevel";
import WaterLevelLine from "@/components/echarts/WaterLevelLine";
import TemperatureLine from "@/components/echarts/TemperatureLine";
import EnergyDashboard from "@/components/echarts/EnergyDashboard";
import TemperatureBar from "@/components/echarts/TemperatureBar";
import PHBar from "@/components/echarts/PHBar";
import TextRoller from "@/pages/components/TextRoller";
// import ObjModel from "@/components/three/ObjModel";
import Axios from "axios";

export default {
  name: "testMain",
  components: {
    // ObjModel,
    PHBar, TemperatureBar, EnergyDashboard, TemperatureLine, WaterLevelLine, WaterLevel, TriangleBar, TextRoller
  },
  data() {
    return {
      poolInfo: {},
      // 泳池信息
      poolInfoData: {
        temperature: 28,
        waterLevel: 1.8,
        ph: 7,
        tds: 34,
        turbidity: 65,
        chlo: 12
      },
      cardStyle: {"margin": "0 auto", "padding": "4px"},
      list: ["连雨不知春去", "一晴方觉夏深"],
      tempHistory: [],
      waterLevelHistory: [],
      historyDataColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '设备名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '水温',
          dataIndex: 'temperature',
          key: 'temperature',
          align: 'center'
        },
        {
          title: '水位',
          dataIndex: 'waterLevel',
          key: 'waterLevel',
          align: 'center'
        },
        {
          title: '浊度值',
          dataIndex: 'ftu',
          key: 'ftu',
          align: 'center'
        },
        {
          title: 'TDS',
          dataIndex: 'tds',
          key: 'tds',
          align: 'center'
        },
        {
          title: 'PH值',
          dataIndex: 'ph',
          key: 'ph',
          align: 'center'
        },
        {
          title: '电量',
          dataIndex: 'energy',
          key: 'energy',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center'
        },
      ],
      historyData: [
        {
          id: '1234561',
          name: '测试用终端',
          temperature: '28 ℃',
          waterLevel: '2.00 m',
          ftu: '1 FTU',
          tds: '12 mg/m³',
          ph: '7',
          energy: '88%',
          status: '正常'
        },
      ]
    }
  },
  mounted() {
    this.getPoolInfo("754684848")
    this.getPoolInfoData("754684848")
    this.getHistoryData("754684848")
  },
  methods: {
    getPoolInfo(id) {
      Axios.get("http://119.3.218.80:8899/getPool", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolInfo = res.data
        console.log(res.data._id.$oid)
      }).catch(err => {
        console.log(err)
      })
    },
    getPoolInfoData(id) {
      Axios.get("http://119.3.218.80:8899/get", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolInfoData.tds = Number(res.data[0].value)
        this.poolInfoData.temperature = Number(res.data[1].value)
        this.poolInfoData.waterLevel = Number(res.data[2].value)
        this.poolInfoData.chlo = Number(res.data[3].value)
        this.poolInfoData.ph = Number(res.data[4].value)
        this.poolInfoData.turbidity = Number(res.data[5].value)
      }).catch(err => {
        console.log(err)
      })
    },
    getHistoryData(id) {
      // 获取历史温度数据
      Axios.get("http://119.3.218.80:8899/getList", {
        params: {
          devId: id,
          valueName: 'temp'
        }
      }).then(res => {
        res.data.forEach(item => {
          this.tempHistory.push(item.value)
        })
      }).catch(err => {
        console.log(err)
      })
      // 获取历史水位
      Axios.get("http://119.3.218.80:8899/getList", {
        params: {
          devId: id,
          valueName: 'xkc'
        }
      }).then(res => {
        res.data.forEach(item => {
          this.waterLevelHistory.push(item.value)
        })
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>
.chart-card {
  padding: 12px !important;
}

.scrollContainer {
  color: #ffffff;
  font-size: 14px;
}
</style>
